<div class="product-display-section container-fluid" id="special-sale">
    <h2 class="sec-custome-h2">
        <img src="{{ 'product-sec-h2-bg.png' | asset_url }}" class="sec-custome-h2-img" />
        <span>{{ section.settings.header_title }}</span>
        <img src="{{ 'product-sec-h2-bg.png' | asset_url }}" class="sec-custome-h2-img" />
    </h2>
    {% for block in section.blocks %}
    {%- case block.type -%}
    {%- when 'product1_setting' -%}
    {% assign product_1 = block.settings.selected_product_1 %}
    {% if product_1 %}
    <div class="special-sale-card special-sale-card-first">
        <div class="product-content">            
            {% assign first_variant = product_1.variants.first %}
            {% if first_variant %}
            {% if first_variant.compare_at_price %}
                {% assign discount_diff_1 = first_variant.compare_at_price | minus: first_variant.price %}
             <div class="discount-tag">{{ discount_diff_1 | money_without_trailing_zeros }} OFF</div>
            {% endif %}
              <div class="product-img">
            <img class="product-image special-image-first" src="{{ first_variant.featured_image.src | img_url: 'medium' }}" alt="{{ product_1.title }}" />
              </div>
            {% else %}
            {% if product_1.compare_at_price %}
                {% assign discount_diff_1 = product_1.compare_at_price | minus: product_1.price %}
             <div class="discount-tag">{{ discount_diff_1 | money_without_trailing_zeros }} OFF</div>
            {% endif %}
              <div class="product-img">
            <img class="product-image special-image-first" src="{{ product_1.featured_image | img_url: 'medium' }}" alt="{{ product_1.title }}" />
              </div>
            {% endif %}
            <div class="product-details">
                <label class="tip-label">Top Rated</label>
                <h4 class="product-title">{{ product_1.title }}</h4>
                <ul class="product-options">
                    {% for variant in product_1.variants %}
                    {% if variant.available and variant.inventory_quantity > 0 %}
                    <li class="label-item label-item-first {% if variant.id == product_1.variants.first.id %}active{% endif %}" 
                      data-id="{{ variant.id }}" 
                      data-price="{{ variant.price | money }}" 
                      data-old-price="{{ variant.compare_at_price | money }}"
                      data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                    >
                      <span>{{ variant.title }}</span>
                    </li>
                    {% endif %}
                    {% endfor %}
                </ul>
                <p class="price special-first-price">{{ product_1.price | money }}<span class="old-price">{{ product_1.compare_at_price | money }}</span></p>
                <div class="product-buttons">
                    <button class="buy-now " onclick="return buySpecialFirst(this);">Buy Now</button>
                    <button class="learn-more" onclick="javascript:window.location.href='{{ product_1.url }}'">Learn More</button>
                </div>
            </div>
        </div>
        <div class="imgs-slider">
            <!-- Swiper -->
            <div class="swiper swiper-pc mySwiperPCFirst">
                <div class="swiper-wrapper">
                    {% if block.settings.slider_img_pc_11 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_11 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_11 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_12 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_12 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_12 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_13 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_13 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_13 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_14 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_14 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_14 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_15 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_15 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_15 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_16 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_16 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_16 }}'" style="cursor:pointer;" />
                    {% endif %}
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="swiper swiper-mo mySwiperMOFirst">
                <div class="swiper-wrapper">
                    {% if block.settings.slider_img_mo_11 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_11 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_11 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_12 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_12 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_12 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_13 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_13 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_13 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_14 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_14 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_14 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_15 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_15 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_15 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_16 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_16 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_16 }}'" style="cursor:pointer;" />
                    {% endif %}
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    {% endif %}

    {%- when 'product2_setting' -%}
    {% assign product_2 = block.settings.selected_product_2 %}
    {% if product_2 %}
    <div class="special-sale-card special-sale-card-second">
        <div class="imgs-slider">
            <!-- Swiper -->
            <div class="swiper swiper-pc mySwiperPCSecond">
                <div class="swiper-wrapper">
                    {% if block.settings.slider_img_pc_21 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_21 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_21 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_22 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_22 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_22 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_23 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_23 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_23 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_24 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_24 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_24 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_25 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_25 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_25 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_pc_26 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_pc_26 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_26 }}'" style="cursor:pointer;" />
                    {% endif %}
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="swiper swiper-mo mySwiperMOSecond">
                <div class="swiper-wrapper">
                    {% if block.settings.slider_img_mo_21 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_21 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_21 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_22 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_22 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_22 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_23 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_23 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_23 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_24 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_24 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_24 }}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_25 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_25 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_25}}'" style="cursor:pointer;" />
                    {% endif %}
                    {% if block.settings.slider_img_mo_26 %}
                        <img class="imgs-slider-item swiper-slide" src="{{ block.settings.slider_img_mo_26 | img_url: 'master' }}" alt="img-slider-item" onclick="javascript:window.location.href='{{ block.settings.slider_href_26 }}'" style="cursor:pointer;" />
                    {% endif %}
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="product-content">
            {% assign first_variant = product_2.variants.first %}
            {% if first_variant %}
            {% if first_variant.compare_at_price %}
                {% assign discount_diff_2 = first_variant.compare_at_price | minus: first_variant.price %}
             <div class="discount-tag">{{ discount_diff_2 | money_without_trailing_zeros }} OFF</div>
            {% endif %}
              <div class="product-img">
            <img class="product-image special-image-second" src="{{ first_variant.featured_image.src | img_url: 'medium' }}" alt="{{ product_2.title }}" />
              </div>
            {% else %}
            {% if product_2.compare_at_price %}
                {% assign discount_diff_2 = product_2.compare_at_price | minus: product_2.price %}
             <div class="discount-tag">{{ discount_diff_2 | money_without_trailing_zeros }} OFF</div>
            {% endif %}
              <div class="product-img">
            <img class="product-image special-image-second" src="{{ product_2.featured_image | img_url: 'medium' }}" alt="{{ product_2.title }}" />
              </div>
            {% endif %}
            <div class="product-details">
                <label class="tip-label">Top Rated</label>
                <h4 class="product-title">{{ product_2.title }}</h4>
                <ul class="product-options">
                    {% for variant in product_2.variants %}
                    {% if variant.available and variant.inventory_quantity > 0 %}
                    <li class="label-item label-item-second {% if variant.id == product_2.variants.first.id %}active{% endif %}" 
                      data-id="{{ variant.id }}" 
                      data-price="{{ variant.price | money }}" 
                      data-old-price="{{ variant.compare_at_price | money }}"
                      data-image-url="{{ variant.featured_image.src | img_url: 'medium' }}"
                    >
                      <span>{{ variant.title }}</span>
                    </li>
                    {% endif %}
                    {% endfor %}
                </ul>
                <p class="price special-second-price">{{ product_2.price | money }}<span class="old-price">{{ product_2.compare_at_price | money }}</span></p>
                <div class="product-buttons">
                    <button class="buy-now " onclick="return buySpecialSecond(this);">Buy Now</button>
                    <button class="learn-more" onclick="javascript:window.location.href='{{ product_2.url }}'">Learn More</button>
                </div>
            </div>
        </div>                
    </div>
    {% endif %}
    {%- endcase -%}
    {%- endfor -%}
</div>
<script src="{{ 'swiper-bundle.min.js' | asset_url }}"></script>
 <!-- Initialize Swiper -->
<script>
    var swiperPCFirst = new Swiper(".mySwiperPCFirst", {
        pagination: {
            el: ".swiper-pagination",
            dynamicBullets: true,
        },
        autoplay: {
            autoplay: 3000,
            stopOnLastSlide: false
        }
    });
    var swiperPCSecond = new Swiper(".mySwiperPCSecond", {
        pagination: {
            el: ".swiper-pagination",
            dynamicBullets: true,
        },
        autoplay: {
            autoplay: 3000,
            stopOnLastSlide: false
        }
    });
    var swiperMOFirst = new Swiper(".mySwiperMOFirst", {
        pagination: {
            el: ".swiper-pagination",
            dynamicBullets: true,
        },
        autoplay: {
            autoplay: 3000,
            stopOnLastSlide: false
        }
    });
    var swiperMOSecond = new Swiper(".mySwiperMOSecond", {
        pagination: {
            el: ".swiper-pagination",
            dynamicBullets: true,
        },
        autoplay: {
            autoplay: 3000,
            stopOnLastSlide: false
        }
    });
</script>
{% schema %}
  {
    "name": "Special Sale Setting",
    "settings": [
        {
            "type": "header",
            "content": "Basic Setting"
        },
        {
            "type": "text",
            "label": "Title",
            "id": "header_title",
            "default": "Special Sale"
        }],
    "blocks":[
        {
            "type": "product1_setting",
            "name": "Product[1] Setting",
            "settings": [
                {
                    "type": "product",
                    "id": "selected_product_1",
                    "label": "Select Product [1]",
                    "info": "Choose the product that contains the variant you want to display."
                },
                {
                    "type": "text",
                    "id": "slider_href_11",
                    "label": "Slider Image1 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_11",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_11",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_12",
                    "label": "Slider Image2 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_12",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_12",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_13",
                    "label": "Slider Image3 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_13",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_13",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_14",
                    "label": "Slider Image4 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_14",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_14",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_15",
                    "label": "Slider Image5 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_15",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_15",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_16",
                    "label": "Slider Image6 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_16",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_16",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                }
            ]
        },
        {
            "type": "product2_setting",
            "name": "Product[2] Setting",
            "settings": [
                {
                    "type": "header",
                    "content": "Product[2] Setting"
                },
                {
                    "type": "product",
                    "id": "selected_product_2",
                    "label": "Select Product [2]",
                    "info": "Choose the product that contains the variant you want to display."
                },
                {
                    "type": "text",
                    "id": "slider_href_21",
                    "label": "Slider Image1 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_21",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_21",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_22",
                    "label": "Slider Image2 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_22",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_22",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_23",
                    "label": "Slider Image3 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_23",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_23",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_24",
                    "label": "Slider Image4 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_24",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_24",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_25",
                    "label": "Slider Image5 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_25",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_25",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                },
                {
                    "type": "text",
                    "id": "slider_href_26",
                    "label": "Slider Image6 Link",
                    "info": "Put href link here",
                    "default":"#"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_pc_26",
                    "label": "Banner Image On PC Client",
                    "info": "Upload a banner image(PC) for the landing page"
                },
                {
                    "type": "image_picker",
                    "id": "slider_img_mo_26",
                    "label": "Banner Image On Mobile Client",
                    "info": "Upload a banner image(Mobile) for the landing page"
                }
            ]
        }
    ]
  }
{% endschema %}